<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>AI剪辑</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      body {
        background: #f5f5f5;
        padding: 20px;
      }

      .container {
        /* max-width: 800px; */
        width: 100%;
        margin: 0 auto;
        background: white;
        padding: 20px;
        border-radius: 8px;
        font-size: 20px;
      }

      .info-banner {
        background: #e6f4ff;
        padding: 12px;
        border-radius: 4px;
        margin-bottom: 20px;
        color: #1677ff;
        font-size: 20px;
        line-height: 1.5;
      }

      .info-banner::before {
        content: "ⓘ";
        margin-right: 8px;
      }

      .row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }

      .input-group {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .label {
        color: #333;
        font-size: 20px;
      }

      .required::before {
        content: "*";
        color: #ff4d4f;
        margin-right: 4px;
      }

      input[type="text"] {
        padding: 4px 11px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        width: 300px;
        height: 32px;
      }

      input[type="text"].small {
        width: 60px;
      }

      .button {
        height: 32px;
        padding: 4px 15px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 20px;
        margin-right: 10px;
        margin-left: 10px;
        line-height: 20px;
      }

      .button-primary {
        background: #5048e5;
        color: white;
      }

      .button-default {
        background: white;
        border: 1px solid #d9d9d9;
        color: #333;
      }

      .textarea {
        width: 100%;
        min-height: 120px;
        padding: 12px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        resize: vertical;
        margin-bottom: 4px;
        font-size: 20px;
        margin-top: 10px;
      }

      .char-count {
        text-align: right;
        color: #999;
        font-size: 12px;
        margin-bottom: 16px;
      }

      .more-settings {
        margin-top: 20px;
      }

      .voice-option {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
      }

      .select-voice {
        color: #1677ff;
        cursor: pointer;
        font-size: 20px;
      }

      .progress-section {
        margin-top: 20px;
      }

      .progress-bar {
        height: 8px;
        background: #f5f5f5;
        border-radius: 4px;
        margin: 8px 0;
      }

      .progress-text {
        color: #666;
        font-size: 20px;
      }

      .task-log {
        color: #1677ff;
        font-size: 20px;
      }

      .number-input-container {
        --primary-color: hsl(210, 90%, 55%);
        --border-color: #ddd;
        --focus-glow: 0 0 0 3px rgba(33, 150, 243, 0.2);
        display: inline-flex;
        align-items: center;
        position: relative;
      }

      .custom-number-input {
        -webkit-appearance: none;
        appearance: none;
        width: 80px;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        line-height: 1.5;
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      /* Firefox 移除箭头 */
      .custom-number-input[type="number"] {
        -moz-appearance: textfield;
      }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="info-banner">
        功能说明：AI原片功能是通过AI理解视频，相据文案生成的配音进行自动音视频匹配
      </div>

      <div class="row">
        <span class="label required">导入素材：</span>
        <label>
          <input
            style="margin-right: 10px"
            type="text"
            placeholder="请选择视频文件夹"
            id="input-video-folder"
            onclick="chooseFolder('input-video-folder')"
            value=""
          />
        </label>
        <button class="button button-default" onclick="start_work()">
          开始任务
        </button>
        <button class="button button-primary" onclick="stop_work()">
          停止任务
        </button>
      </div>

      <div style="margin-bottom: 10px;">视频数量(10-50)</div>
      <div class="row">
        <div class="input-group">
          <span class="label required">生成数量</span>
          <label style="margin-right: 10px">
            <div class="number-input-container">
              <input
                type="number"
                min="1"
                max="10"
                value="1"
                class="custom-number-input"
                id="count"
              />
            </div>
          </label>
        </div>
        <div class="input-group">
          <span class="label required">导出目录：</span>
          <label>
            <input
              type="text"
              readonly
              placeholder="请选择导出文件夹"
              id="output-folder"
              onclick="chooseFolder('output-folder')"
              value=""
            />
          </label>
        </div>
        <button class="button button-primary">打开文件夹</button>
      </div>

      <div class="label required">视频文案：</div>
      <label>
        <textarea
          class="textarea"
          placeholder="请输入视频文案"
          id="subtitle"
        ></textarea>
      </label>
      <div class="char-count">0 / 500</div>
      <!--TODO: 动态字数统计 -->
      <button class="button button-primary">AI生成</button>

      <div class="more-settings">
        <details>
          <summary style="margin-bottom: 10px;">更多设置</summary>
          <div class="voice-option">
            <label for="voice-select">配音角色：</label>
            <select id="voice-select" style="padding: 5px;font-size:16px">
              <option value="zhimiao_emo">知妙(多情感女声)</option>
              <option value="zhimi_emo">知米(亲和女声)</option>
              <option value="zhibei_emo">知贝(活力童声)</option>
              <option value="zhiyan_emo">知燕(直播女声)</option>
              <option value="zhiqing">知青(中国台湾话女声)</option>
              <option value="zhitian_emo">知甜(甜美女声)</option>
              <option value="zhichu">知厨(舌尖男声)</option>
              <option value="zhide">知德(新闻男声)</option>
              <option value="zhifei">知飞(激昂解说)</option>
              <option value="zhijia">知佳(标准女声)</option>
              <option value="zhilun">知伦(悬疑解说)</option>
              <option value="zhinan">知楠(广告男声)</option>
              <option value="zhiqian">知倩(资讯女声)</option>
              <option value="zhiru">知茹(新闻女声)</option>
              <option value="zhiwei">知薇(萝莉女声)</option>
              <option value="zhixiang">知祥(磁性男声)</option>
            </select>
          </div>
        </details>
      </div>
    </div>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function () {
        new QWebChannel(parent.qt.webChannelTransport, function (channel) {
          Bridge = channel.objects.Bridge;

          Bridge.started.connect(function (msg) {
            showModal(msg);
          });
          Bridge.failed.connect(function (msg) {
            showModal(msg);
          });
          Bridge.finished.connect(function (message) {
            showModal(message);
          });

          // 选择的文件夹信号槽
          Bridge.select_folder_result.connect(function (eid, path) {
            document.getElementById(eid).value = path;
          });
          // 选择文件夹
          window.chooseFolder = function (eid) {
            Bridge.choose_folder(eid);
          };
          // 打开文件夹
          window.openFolder = function (path) {
            Bridge.open_file(path);
          };
          // 开始任务
          window.start_work = function () {};
          // 停止
          window.stop_worker = function () {
            Bridge.stop();
          };
        });
      });
    </script>
  </body>
</html>
